<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel='stylesheet' href="home_search.css">
        <title>Plant Maintenance Manual 植物养护查询</title>
    </head>
    <body style="">
        <!-- <img id="head" src="../PlantsData/WebImgs/bg12.jpg"> -->
        <!-- <div id="head"></div> -->


        <div id="searchbar">
            <div id="tab">
                <ul class="list">
                    <li class="list_nav active">搜&nbsp;&nbsp;&nbsp;索</li>
                    <li class="list_nav">植物字典</li>
                </ul>
                <ul class="tab">
                    <form action="search_result.php" method="POST">
                        <li class="tab_nav on" >
                            <input type="search" class="input_bar" placeholder="请输入您要搜索的植物" name="plant_name" value="">
                            <?php
//                            $plname = $_POST['plant_name'];
//                            echo "<input type = 'submit' class = 'search_button' value = 'Search' onclick ='location =search_result.php?Name=.$plname'";
////                            
                            ?>
                            <!--<button class="search_button" onclick="Search_plant()">Search</button>-->
                            <button class="search_button" onclick="search_result.php">Search</button>

                        </li>
                    </form>

                    <li class="tab_nav">
                        <div class="divmax">

                            <div  class="divmin" >
                                <a href="plantsDictionary.php?name=大花马齿苋"><img src="../plantsImg/dahuamachixian1.jpg" ></a>
                                <p >大花马齿苋</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin" >
                                <a href="plantsDictionary.php?name=蓝花丹"><img src="../plantsImg/lanhuadan1.jpg"  ></a>
                                <p>蓝花丹</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin">
                                <a href="plantsDictionary.php?name=茉莉花"> <img src="../plantsImg/molihua1.jpg" ></a>
                                <p >茉莉花</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin" >
                                <a href="plantsDictionary.php?name=栀子"> <img src="../plantsImg/zhizi1.jpg" ></a>
                                <p>栀子</p>
                            </div>
                        </div>

                        <div class="divmax">

                            <div class="divmin" >
                                 <a href="plantsDictionary.php?name=含羞草"> <img src="../plantsImg/hanxiucao1.jpg" ></a></a>
                                <p >含羞草</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin">
                                <a href="plantsDictionary.php?name=辣椒"> <img src="../plantsImg/lajiao1.jpg" ></a>
                                <p >辣椒</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin">
                                <a href="plantsDictionary.php?name=鼠尾草"> <img src="../plantsImg/shuweicao1.jpg" ></a>
                                <p >鼠尾草</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin">
                                <a href="plantsDictionary.php?name=牛至"> <img src="../plantsImg/niuzhi2.jpg" ></a>
                                <p>牛至</p>
                            </div>
                        </div>

                        <div class="divmax">

                            <div class="divmin" >
                                <a href="plantsDictionary.php?name=葱"> <img src="../plantsImg/cong1.jpg" ></a>
                                <p >葱</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin" >
                                <a href="plantsDictionary.php?name=含笑花"> <img src="../plantsImg/hanxiaohua1.jpg" ></a>
                                <p >含笑花</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin">
                                <a href="plantsDictionary.php?name=夜合花"> <img src="../plantsImg/yehehua1.jpg" ></a>
                                <p >夜合花</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin" >
                                <a href="plantsDictionary.php?name=银星秋海棠"> <img src="../plantsImg/yinxingqiuhaitang1.jpg" ></a>
                                <p >银星秋海棠</p>
                            </div>
                        </div>
                        <div class="divmax">

                            <div class="divmin">
                                <a href="plantsDictionary.php?name=花毛茛"> <img src="../plantsImg/huamaogen1.jpg"></a>
                                <p >花毛茛</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin">
                                <a href="plantsDictionary.php?name=龙骨"> <img src="../plantsImg/longgu1.jpg" ></a>
                                <p >龙骨</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin">
                                <a href="plantsDictionary.php?name=虎皮兰">  <img src="../plantsImg/hupilan2.jpg" ></a>
                                <p >虎皮兰</p>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="divmin">
                                <a href="plantsDictionary.php?name=绿萝"> <img src="../plantsImg/lvluo1.jpg" ></a>
                                <p >绿萝</p>
                            </div>
                        </div>

                    </li>
                </ul>
            </div>
        </div>



        <script>
            //js实现tab选项卡交互
            //方法一：
            var aList = document.getElementsByClassName("list_nav"),
                    aTab = document.getElementsByClassName("tab_nav"),
                    index = 0; //用来存储上一次的值
            for (var i = 0; i < aList.length; i++) {
                //闭包加函数自执行
                (function (i) {
                    aList[i].onclick = function () {
                        aList[index].classList.remove("active");
                        aTab[index].classList.remove("on");
                        index = i;
                        aList[index].classList.add("active");
                        aTab[index].classList.add("on");
                    }
                })(i);
            }


            function showDictionary() {
                window.location.href = "plantsDictionary.html";
            }

//            function Search_plant() {
//                var plant = document.getElementById("input_bar");
//                var plname=plant.value;
//                window.location.href = "search_result.php?Name=" + plname;
//
//            }

            //搜索按钮
//            function Search_plant() {
//                // 创建XMLHttpRequest对象(HTTP请求对象)
//                if (window.XMLHttpRequest)
//                {
//                    // code for IE7+, Firefox, Chrome, Opera, Safari
//                    xmlhttp = new XMLHttpRequest();
//                } else {
//                    // code for IE6, IE5
//                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//                }
//                // 定义事件处理程序
//                xmlhttp.onreadystatechange = function ()
//                {
//                    // 判断XMLHttpRequest对象的状态和HTTP状态代码
//                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
//                    {
//                        document.getElementById("input_bar").innerHTML=xmlhttp.responseText;
//                    }
//                }
//                // 初始化待发送给Web服务器的请求
//                xmlhttp.open("GET", "search_result.php?name=" + input_name, true);
//                // 向服务器发送当前请求
//                xmlhttp.send();
//
////                alter("name=" + $input_name);
//
//                window.location.href ='search_result';
//            }
        </script>
    </body>
</html>